<template>
  <view class="template-shop tn-safe-area-inset-bottom">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed :bottomShadow="false" backgroundColor="rgba(54,46,122)">
      <text class="nav-titles">邀约</text>
      <view slot="right" class="yaoyueIcon1-parent">
        <image
          @click="
            navigateToFn({
              url: '/homeMixinPages/yaoyue/my_join',
              checkLogin: true,
            })
          "
          class="yaoyueIcon1"
          src="../../static/images/yaoyueIcon1.png"
          mode=""
        ></image>
      </view>
    </tn-nav-bar>

    <view class="" :style="{ paddingTop: vuex_custom_bar_height + 'px' }">
      <view class="" style="width: 100%">
        <tn-tabs
          :list="list"
          activeColor="rgba(0,0,0,0)"
          :bold="true"
          inactiveColor="#FFFFFF"
          :activeItemStyle="activeItemStyle"
          :isScroll="true"
          :current="currenttiezi"
          name="tab-name"
          @change="change"
        ></tn-tabs>
      </view>
    </view>
    <mescroll-body ref="mescrollRef" @down="downCallback" @up="upCallback">
      <view
        class="wallpaper-shadow tn-margin tn-padding tn-border-solid tn-shadow"
        v-for="(item, index) in content"
        :key="index"
        @click="
          navigateToFn({
            url: '/homeMixinPages/yaoyue/show?id=' + item.id,
            checkLogin: false,
          })
        "
        :class="item.time_is ? 'guoqu' : 'guoqu'"
        style="position: relative"
      >
        <!-- <view style="position: absolute;bottom:20rpx;right:20%;z-index: 50;opacity: 0.3;" v-if="item.time_is">
					<tn-button backgroundColor="#b9b9b9" padding="20rpx 20rpx" size="sm" style="border-radius: 2500px;">
						<text class="tn-color-black">已过期</text>
					</tn-button>
				</view> -->
        <view class="tag-1" v-if="item.time_is || item.num_join >= item.num">
          <text class="tag-title">{{
            item.num_join >= item.num ? "已满员" : "已过期"
          }}</text>
        </view>
        <view class="tag-2" v-else>
          <text class="tag-title">招募中</text>
        </view>

        <view class="tn-flex tn-flex-col-top">
          <view class="logo-pic">
            <image
              class="logo-image"
              :src="item.userInfo.avatar"
              mode=""
            ></image>
          </view>
          <view class="top-box-right">
            <view class="top-box-1">
              <text class="top-box-name">
                {{ item.userInfo.nickname }}
              </text>
              <view class="top-box-type">
                <text>发起人</text>
              </view>
            </view>
            <view class="top-box-2">
              <text class="tn-text-bold">
                {{ item.cate }}
              </text>
              <text class="tn-text-bold">
                {{ item.paytype }}
              </text>
            </view>
            <text class="top-box-3">
              {{ item.detail }}
            </text>
          </view>

          <!-- <view class="tn-padding-left-sm" style="width: 100%;">
						<view class="tn-flex tn-flex-row-between tn-flex-col-between">
							<view class="justify-content-item">
								<text
									class="tn-color-wallpaper tn-color-gray tn-text-bold">{{item.userInfo.nickname}}</text>
								<text
									class="tn-margin-left-sm tn-tag-content tn-shadow-blur tn-cool-bg-color-4 tn-margin-right tn-text-sm tn-text-bold">
									{{item.cate}}
								</text>
								<text
									class="tn-tag-content tn-shadow-blur tn-cool-bg-color-6 tn-margin-right tn-text-sm tn-text-bold">
									{{item.paytype}}
								</text>

							</view>
							<view class="justify-content-item tn-bg-green--light tn-round tn-color-green"
								v-if="item.quanzhu>0" style="padding: 5rpx 15rpx;">
								<text class="tn-color-wallpaper  tn-text-bold ">圈主局</text>
							</view>


						</view>
						<view class=" tn-padding-top-xs  tn-text-ellipsis-2">
							<text class=" ">{{item.detail}}</text>
						</view>
					</view> -->
        </view>
        <view class="item-num">
          <view class="item-num-left">
            <view class="item-num-left-img"> </view>
            <text class="item-num-left-text">{{ item.num_join }}人已报名</text>
          </view>
          <text class="item-num-right">
            活动人数：{{ item.num_join }}/{{ item.num }}
          </text>
        </view>
        <view class="item-time">
          <text class="item-time-left"> 活动时间：{{ item.time }} </text>
          <text class="item-time-right"> 活动地点：某某市万达广场4楼 </text>
        </view>
        <!-- <view class="tn-flex tn-flex-row-between tn-flex-col-between tn-margin-top-sm">
					<view class="justify-content-item tn-color-gray tn-text-center tn-color-gray">
						<text class="tn-icon-time tn-padding-right-xs tn-padding-left-xs tn-text-df"></text>
						<text class="tn-text-sm">{{item.time}}</text>
					</view>
					<view class="justify-content-item tn-round tn-text-xs tn-bg-blue--light tn-color-blue"
						style="padding: 5rpx 15rpx;">
						{{item.num_join}}/{{item.num}}
					</view>
				</view> -->
      </view>
    </mescroll-body>
    <login-fn
      :is-show-login="loginBoxFlag"
      @loginSuccessCallback="refreshFn"
      @close="closeGlobalLoginFn"
    >
    </login-fn>
    <view class="tn-tabbar-height"></view>
    <view class="add-box" @click="faqi()">
      <text class="add-box-name">发起活动</text>
    </view>
    <!-- <view class="tn-flex tn-flex-row-between tn-padding tn-footerfixed ">
			<view class="justify-content-item tn-text-center"
				@click="navigateToFn({ url: '/homeMixinPages/yaoyue/my_join', checkLogin: true })"
				style="padding-bottom: 20rpx;">
				<tn-button backgroundColor="tn-cool-bg-color-9" padding="40rpx 20rpx" shadow fontBold>
					<text class="tn-icon-my-fill tn-padding-right-xs tn-color-black"></text>
					<text class="tn-color-black">我加入邀约</text>

				</tn-button>

			</view>
			<view class="justify-content-item tn-text-center"
				@click="navigateToFn({ url: '/homeMixinPages/yaoyue/my', checkLogin: true })" style="padding-bottom: 20rpx;">
				<tn-button backgroundColor="tn-cool-bg-color-6" padding="40rpx 20rpx" shadow fontBold>
					<text class="tn-icon-my-fill tn-padding-right-xs tn-color-black"></text>
					<text class="tn-color-black">我发起的邀约</text>

				</tn-button>

			</view>

			<view class="justify-content-item tn-text-center" @click="faqi()" style="padding-bottom: 20rpx;">
				<tn-button backgroundColor="tn-cool-bg-color-14" padding="40rpx 20rpx" shadow fontBold>
					<text class="tn-icon-add tn-padding-right-xs tn-color-black"></text>
					<text class="tn-color-black">发起活动</text>

				</tn-button>

			</view>
		</view> -->
    <!-- 登录框组件 -->
  </view>
</template>

<script>
import template_page_mixin from "@/libs/mixin/template_page_mixin.js";
import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue";
import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
export default {
  name: "TemplateGroup",
  mixins: [template_page_mixin, MescrollMixin],
  components: {
    MescrollBody,
  },

  data() {
    return {
      activeItemStyle: {
        fontSize: `32rpx`,
        color: `#24D4D1`,
      },
      isShow: false,
      dalei: 0,
      type: 0,
      isfa: 0,
      loginBoxFlag: false, // 登录框显示隐藏状态
      id: 0,
      currenttiezi: 0,
      list: [],
      xiaolei: 0,
      searchKey: "",
      content: [],
    };
  },
  onLoad(option) {
    if (option.id) {
      this.id = option.id;
    }

    let that = this;
    this.info();
    uni.$off("setLoginBoxFlag");
    uni.$on("setLoginBoxFlag", (loginBoxFlag) => {
      that.loginBoxFlag = loginBoxFlag;
    });
    uni.$on("zujufabu", (data) => {
      that.mescroll.resetUpScroll();
    });
  },
  methods: {
    faqi() {
      this.navigateToFn({
        url: "/homeMixinPages/yaoyue/add",
        checkLogin: true,
      });
    },
    xuan(item) {
      uni.$emit("shop", item);
      uni.navigateBack();
    },
    async info() {
      let that = this;
      let result = await that.$request({
        loading: 0,
        method: "post",
        url: "/api/yuehui/getclass",
        data: {
          id: that.id,
        },
      });

      if (result.statusCode == 200) {
        that.list = result.data.data;
        this.isfa = result.data.msg;
      }
    },
    // 跳转
    tn(e) {
      uni.navigateTo({
        url: e,
      });
    },
    change(index) {
      this.currenttiezi = index;
      this.dalei = this.list[index].id;
      this.mescroll.resetUpScroll();
    },

    /// 列表调用
    downCallback(mescroll) {
      mescroll.endSuccess();
      mescroll.resetUpScroll();
    },
    async upCallback(mescroll) {
      let that = this;
      let result = await that.$request({
        loading: 1,
        method: "post",
        url: "/api/yuehui/getList",
        data: {
          searchKey: this.searchKey,
          quan_id: that.id,
          cate_id: that.dalei,
          page: mescroll.num,
        },
      });
      if (result.statusCode == 200) {
        if (result.data.code == 200) {
          if (mescroll.num == 1) {
            that.content = result.data.data.data;
          } else {
            that.content = that.content.concat(result.data.data.data);
          }
          mescroll.endSuccess(
            result.data.data.data.length,
            result.data.data.data.length >= mescroll.size
          );
        } else {
          uni.showToast({
            icon: "none",
            title: result.data.msg,
          });
        }
      } else {
        uni.showToast({
          icon: "none",
          title: that.$errorMsg,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.template-shop {
}

body,
uni-page-body {
  color: #fff;
}

::deep .tn-icon-left:before {
  color: #fff !important;
}

.nav-titles {
  color: #fff;
}

/* 底部悬浮按钮 start*/
.tn-tabbar-height {
  min-height: 100rpx;
  height: calc(120rpx + env(safe-area-inset-bottom) / 2);
}

.tn-footerfixed {
  bottom: 50px;
  position: fixed;
  width: 100%;
  z-index: 1024;
  box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);
}

.tn-tag-content {
  border-radius: 8rpx 25rpx 25rpx 8rpx;
  display: inline-block;
  line-height: 35rpx;
  padding: 8rpx 10rpx;
  color: rgba(255, 255, 255, 0.8);
}

.guoqu {
  width: 670rpx;
  height: 256rpx;
  border-radius: 20rpx;
  opacity: 1;

  /* 自动布局 */
  display: flex;

  background: rgba(0, 0, 0, 0.302);
}

.tn-margin {
  position: absolute;
  width: 670rpx;
  height: 256rpx;
  border-radius: 20rpx;
  opacity: 1;
  padding: 20rpx;
  /* 自动布局 */
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  margin-top: 40rpx;
  background: rgba(0, 0, 0, 0.302);
}

.logo-pic {
  width: 100rpx;
  height: 100rpx;
  border: 4rpx solid #24d4d1;
  border-radius: 50%;
}

.top-box {
  display: flex;
  width: 100%;
}

.logo-image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.top-box-right {
  display: flex;
  flex-direction: column;
  width: 400rpx;
  margin-left: 10rpx;
}

.top-box-1 {
  display: flex;
}

.top-box-name {
  font-family: Source Han Sans;
  font-size: 14px;
  color: #ffffff;
}

.top-box-type {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 94rpx;
  height: 28rpx;
  border-radius: 309px;
  opacity: 1;
  margin-top: 8rpx;
  /* 暗色调渐变5 */
  background: linear-gradient(270deg, #66e0ff 0%, #6ef0da 100%);
  color: #ffffff;
  font-size: 10px;
  font-size: bold;
}

.top-box-2 {
  display: flex;
  margin-top: 8rpx;

  .tn-text-bold {
    display: flex;
    justify-content: center;
    text-align: center;
    width: 92rpx;
    height: 28rpx;
    border-radius: 414px;
    opacity: 1;
    background: linear-gradient(90deg, #7f50fe 0%, #ffaef8 67%, #d5b7f8 100%);
    color: #ffffff;
    font-size: 20rpx !important;
    line-height: 28rpx;
    font-size: bold;
    margin-right: 8rpx;
  }
}

.top-box-3 {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #ffffff;
  font-size: 10px;
  margin-top: 12rpx;
}

.item-num {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 20rpx;
}

.item-num-left {
  display: flex;
}

.item-num-left-img {
}

.item-num-left-text {
  font-size: 10px;
  color: #ffffff;
}

.item-num-right {
  font-size: 10px;
  color: #d8d8d8;
}

.item-time {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 20rpx;
}

.item-time-left {
  font-size: 10px;
  color: #d8d8d8;
}

.item-time-right {
  max-width: 40%;
  flex: 1;
  font-size: 10px;
  color: #d8d8d8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tag-1 {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 104rpx;
  height: 34rpx;
  border-radius: 0px 20rpx 0px 20rpx;
  opacity: 1;

  /* 自动布局 */
  display: flex;
  justify-content: center;
  align-items: center;

  /* 正文色/正文辅助色 */
  background: #767676;
}

.tag-2 {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 104rpx;
  height: 34rpx;
  border-radius: 0px 20rpx 0px 20rpx;
  opacity: 1;

  /* 自动布局 */
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(180deg, #fa5151 0%, #ffc300 100%);
}

.tag-title {
  font-size: 12px;
  color: #ffffff;
}

.yaoyueIcon1 {
  width: 15.8px;
  height: 15.52px;
}

.yaoyueIcon1-parent {
  padding: 10px;
  padding-right: 40rpx;
}

.add-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 432rpx;
  height: 100rpx;
  position: fixed;
  z-index: 20;
  left: 160rpx;
  bottom: 160rpx;
  background: linear-gradient(270deg, #66e0ff 0%, #6ef0da 100%);
  border-radius: 305px;
}

.add-box-name {
  font-size: 36rpx;
  color: #fff;
}
</style>